<template>
    <div class="userreg">
        图片上传：
      <el-upload
        class="avatar-uploader"
        action="/api/upload"  
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        @change="getSrc()"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from "vue";
  import { UploadFile, ElMessage, UploadRawFile } from "element-plus";  
  interface resI{
      errno: number;
      data:{
          url:string;
          alt:string
      }
  }
  export default defineComponent({
    data() {
      return {
          imageUrl:'',
          src:''
      };
    },
    methods: {
      handleAvatarSuccess(response: resI, uploadFile: UploadFile) {
        console.log(response, uploadFile);
            this.src = response.data.url;
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
        this.imageUrl = URL.createObjectURL(uploadFile.raw!);
      },
      beforeAvatarUpload(rawFile: UploadRawFile) {
          if (rawFile.type !== "image/jpeg") {
            ElMessage.error("Avatar picture must be JPG format!");
            return false;
          } else if (rawFile.size / 1024 / 1024 > 2) {
            ElMessage.error("Avatar picture size can not exceed 2MB!");
            return false;
          }
          return true;
      },
      getSrc(){
        this.$emit('get-img-src',this.src);        
      }
    },
  });
  </script>
  
  <style lang="scss" scoped>
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>
  
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  </style>